<script setup>
import { ref, onMounted } from "vue";
import QRCode from "./components/QRCode.vue";

const qrcon = ref(null);
const qrconfig = ref({
  value: "http://39.105.31.208:8080/gltffbxanim/",
  background: "white",
  backgroundAlpha: 1,
  foreground: "#00571f",
  foregroundAlpha: 0.8,
  level: "H",
  size: 512,
  qrpadding: 0,
  renderAs: 'svg',
  iconUrl: 'vite.svg',
  iconRatio: 0.15,
  iconPaddingRatio: 0.03,
  gradientOn: true,
  gradientType: 'radial', //'linear' | 'radial'
  gradientStartColor: '#ffd129',
  gradientEndColor: '#906dfe',
});
onMounted(() => {
  if (document.documentElement.clientWidth / document.documentElement.clientHeight >= 1.2) {
    document.documentElement.style.fontSize =
      (document.documentElement.clientWidth * 9 + document.documentElement.clientHeight * 16) /
        2500 +
      'px'
  } else {
    document.documentElement.style.fontSize =
      (document.documentElement.clientWidth * 7 + document.documentElement.clientHeight * 12) /
        1800 +
      'px'
  }
});
</script>

<template>
  <div class="appview">
    <QRCode
      :qrValue="qrconfig.value"
      :qrBGcolor="qrconfig.background"
      :qrBGalpha="qrconfig.backgroundAlpha"
      :qrforecolor="qrconfig.foreground"
      :qrforealpha="qrconfig.foregroundAlpha"
      :qrlevel="qrconfig.level"
      :qrsize="qrconfig.size"
      :qrpadding="qrconfig.qrpadding"
      :iconUrl="qrconfig.iconUrl"
      :iconRatio="qrconfig.iconRatio"
      :iconPaddingRatio="qrconfig.iconPaddingRatio"
      :gradientOn="qrconfig.gradientOn"
      :gradientType="qrconfig.gradientType"
      :gradientStartColor="qrconfig.gradientStartColor"
      :gradientEndColor="qrconfig.gradientEndColor"
    ></QRCode>
  </div>
</template>

<style lang="scss" scoped>
.appview {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
